.app-container {
  position: relative;

  .inner-container {
    background: #ffffff;

    .filter-container {
      padding: 16px 16px 6px;

      .filter-item:not(:last-child) {
        margin-right: 10px;
      }

      .filter-item {
        display: inline-block;
        vertical-align: middle;
        margin-bottom: 10px;
      }

      .el-input {
        width: auto;
      }

      .el-select {
        width: auto;
      }
    }

    // page页样式
    .page-container {
      padding: 0 0 4px 16px;
    }

    //输入框样式
    .el-input__inner {
      height: 30px;
      line-height: 30px;
      font-size: 12px;
    }

    .el-input__icon {
      line-height: 30px;
    }

    .el-form {
      .el-input__inner {
        width: 300px;
      }

      .el-select {
        .el-input__inner {
          width: auto;
        }
      }
    }

    //时间选择器样式
    .el-date-editor .el-range-input {
      height: 94%;
      font-size: 12px;
    }

    .el-date-editor .el-range__icon {
      line-height: 26px;
    }

    .el-date-editor .el-range-separator {
      line-height: 26px;
      font-size: 12px;
    }
  }

  //表格样式
  .table-box {
    padding: 0 16px 8px;

    .el-table {
      background-color: transparent;
      border: 1px solid var(--gc-main-bg) !important;

      th.is-leaf {
        border-bottom: 2px solid #007aff;
        background-color: var(--gc-element-header-bg);
      }

      th>.cell {
        padding-left: 14px;
      }

      th.gutter {
        background-color: #fafafa;
      }

      // tr td {
      //   border-bottom: none;
      //   background-color: var(--gc-content-bg);
      // }

      tr:last-child td {
        border-bottom: none;
      }

      /* 滚动条样式设置*/
      .el-table__body-wrapper::-webkit-scrollbar {
        width: 12px;
        height: 12px;
      }

      .el-table__body-wrapper::-webkit-scrollbar-corner {
        background: transparent;
      }

      .el-table__body-wrapper::-webkit-scrollbar-track {
        border-radius: 10px;
      }

      .el-table__body-wrapper::-webkit-scrollbar-thumb {
        min-height: 20px;
        background-clip: content-box;
        border: 2px solid transparent;
        border-radius: 10px;
        // background-color: #ddd;
        background-color: var(--gc-scroll);
      }

      .el-table__fixed::before,
      .el-table__fixed-right::before {
        display: none;
      }
    }
  }

}

// 弹出层，有滚动条下最后一项显示不全
.el-select-dropdown .el-scrollbar .el-select-dropdown__wrap {
  margin-bottom: var(--gc-element-scrollbar-margn-bottom) !important;
}


.router-tab__header {
  .nav-prev {
    border: 1px solid var(--gc-element-border) !important;
    background: var(--gc-router-tab-bg) !important;
  }

  .nav-next {
    border: 1px solid var(--gc-element-border) !important;
    background: var(--gc-router-tab-bg) !important;
  }
}

// router-tab__container 背景颜色
.router-tab__container {
  // @include common-container-bg($--background-color-base);
  background-color: var(--gc-bg) !important;
}

// dialog设置
.el-dialog__wrapper {
  overflow: hidden !important;
}

.el-dialog {
  margin-bottom: 100px !important;
}

.el-dialog__body {
  padding: 18px 24px !important;
  max-height: calc(90vh - 200px) !important;
  min-height: 200px;
  overflow-y: auto;
}

// dialog头部
.el-dialog__header {
  @include common-bg($whiteBgHover);
  padding: 0 !important;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  font-weight: 700;
}

// el-table
.el-table .el-table__fixed-right-patch {
  background-color: var(--gc-content-bg);
  border-bottom: 2px solid var(--gc-content-bg);
  top: none;
}

.el-checkbox .el-checkbox__inner {
  // background-color: red !important;
  @include common-input-bg($--color-primary);

  &::after {
    border-bottom: 1px solid $gc-color-white !important;
    border-right: 1px solid $gc-color-white !important;
  }

  // @include common-hover($whiteBgHover);
}

// ztree
.ztree {
 a, span {
    @include common-span-color($--color-text-primary);
  }

}

.treeStyle {
  .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }
}

// packUpBtn
.packUpBtn {
  @include common-bg($whiteBgHover);

  a {
    @include common-input-bg($gc-color-white);
  }
}

.gc-up-down-layout{
  .gc-header{
    @include common-header-bg(#007aff);
  }
  .router-tab__item.is-active{
    @include common-router-tab-active-border-top(#007aff);
  }
}


.el-dialog__headerbtn {
  top: 0 !important;
  line-height: 40px;
}


::v-deep .el-dialog__footer {
  height: 48px;
  padding: 0 20px 0 0;
  line-height: 48px;
  text-align: right;
}

.el-tooltip__popper {
  padding: 8px 10px;
  max-width: 60%;
}

.el-textarea__inner {
  font-family: inherit;
}

.el-dialog .table-box {
  padding: 0 16px 4px;

  .el-table {
    border: 1px solid var(--gc-main-bg);

    th.is-leaf {
      border-bottom: 2px solid #007aff;
    }

    th>.cell {
      padding-left: 14px;
    }

    th.gutter {
      background-color: #fafafa;
    }

    tr td {
      border-bottom: none;
    }

    tr:last-child td {
      border-bottom: none;
    }

    .el-table__fixed-right-patch {
      background-color: var(--gc-content-bg);
      border-bottom: 1px solid var(--gc-content-bg);
      top: none;
    }

    /* 滚动条样式设置*/
    .el-table__body-wrapper::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    .el-table__body-wrapper::-webkit-scrollbar-corner {
      background: transparent;
    }

    .el-table__body-wrapper::-webkit-scrollbar-track {
      border-radius: 10px;
    }

    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      border: 2px solid transparent;
      border-radius: 10px;
      // background-color: #ddd;
      background-color: var(--gc-scroll);
    }

    .el-table__fixed::before,
    .el-table__fixed-right::before {
      display: none;
    }
  }
}

/*IE placeholder兼容性*/
.el-textarea__inner {
  background: none;
}

.ie-placeholder {
  float: left;
  position: absolute;
  color: #999999;
  top: 0;
  left: 15px;
  font-size: 13px;
  text-indent: 16px;
  z-index: 0;
  max-width: 100%;
  overflow: hidden;
  pointer-events: none;
  word-break: keep-all;
}

.gc-login .ie-placeholder {
  top: 7px;
}


// 全局表格内部button行样式

.el-table .cell {
  line-height: 22px;
}

.cell .el-button {
  padding: 5px 8px !important;
}

.cell .el-dropdown {
  padding-left: 8px;
}

.gc-link {
  color: $--color-primary;
  cursor: pointer;
}

.gc-link-primary {
  color: $--color-primary;
  cursor: pointer;

  &:hover {
    text-decoration: underline
  }
}

.gc-link-success {
  color: $--color-success;
  cursor: pointer;

  &:hover {
    text-decoration: underline
  }
}

.gc-link-warning {
  color: $--color-warning;
  cursor: pointer;

  &:hover {
    text-decoration: underline
  }
}

.gc-link-danger {
  color: $--color-danger;
  cursor: pointer;

  &:hover {
    text-decoration: underline
  }
}

.gc-link-infoy {
  color: $--color-info;
  cursor: pointer;

  &:hover {
    text-decoration: underline
  }
}

.gc-status-primary {
  color: $--color-primary;
}

.gc-status-success {
  color: $--color-success;
}

.gc-status-warning {
  color: $--color-warning;
}

.gc-status-danger {
  color: $--color-danger;
}

.gc-status-info {
  color: $--color-info;
}

/**
  * elementUI 分页样式编辑
 */
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .btn-next,
.el-pagination.is-background .el-pager li {
  background-color: transparent;
  color: #bfbfbf;

  &:hover {
    color: $--color-primary;
  }
}

.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .btn-next:disabled {
  color: #bfbfbf;
}

.el-pagination__total {
  color: #bfbfbf;
}

.el-pagination .el-select .el-input .el-input__inner {
  border: var(--gc-border-none) !important;
  color: #bfbfbf;

  &:hover {
    color: $--color-primary;
  }
}


/**
  * 编辑输入框mini的高度，保持和按钮的高度一致
 */
.el-input--mini .el-input__inner {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}

/**
 * 编辑el-tooltip
 */
.el-tooltip__popper.is-light,
.el-tooltip__popper.is-dark {
  max-width: 200px;
  // background-color: white !important;
  color: $--color-text-primary;
  border: 1px solid var(--gc-side-menu-bg);
}

.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: var(--gc-side-menu-bg) !important;

  &::after {
    border-bottom-color: var(--gc-element);
  }
}

.el-tooltip__popper[x-placement^="top"] .popper__arrow {
  border-top-color: var(--gc-side-menu-bg) !important;

  &::after {
    border-top-color: var(--gc-element) !important;
  }
}

.el-tooltip__popper[x-placement^="left"] .popper__arrow {

  // border-left-color: white;
  // border-left-color: var(--gc-side-menu-bgr);
  &::after {
    border-left-color: var(--gc-element);
  }
}

.el-tooltip__popper[x-placement^="right"] .popper__arrow {
  border-right-color: var(--gc-side-menu-bg) !important;

  &::after {
    border-right-color: var(--gc-theme) !important;
  }

}

/**
  * 编辑动态主题时，dark主题primary的文字颜色丢失导致看不到文字
 */
.el-tag--dark {
  color: white !important;
}

// 修复el-tag竖向排列的问题
.el-tag {
  display: inline-block !important;
}

// 修复换肤hover边框颜色不对的问题
.el-button:hover {
  border-color: #007aff !important;
}

.el-button--primary {
  display: inline-flex;
  background-color: $--color-primary !important;
  border: 1px solid $--color-primary !important;
  border: var(--gc-border-none) !important;

  i {
    color: var(--gc-i) !important;
  }

  span {
    color: $gc-color-white;
  }

  &:hover {
    background-color: $--color-primary !important;

    span {
      color: $gc-color-white !important;
    }
  }
}

// 弹出层表格样式
.el-drawer__wrapper {
  th.is-leaf {
    border-bottom: 2px solid $--color-primary !important;
  }
}

// dialog中的滚动条样式
div {
  @include common-dialog-scrollbar;
}


// 弹出层样式
.el-button--default {
  @include common-button-default(#007aff);
}

// .el-button--primary {
//   @include common-button-primary(#007aff);
// }

// dropdown-menu
.el-dropdown-menu__item:not(.is-disabled):hover {
  @include common-hover($whiteBgHover);
}

// input
.el-input__inner {
  @include common-input-bg($gc-color-white);
}

// textarea-input
.el-textarea__inner {
  @include common-input-bg($gc-color-white);
}

// switch
.el-switch.is-checked {
  .el-switch__core {
    background: $--color-primary !important;
  }
}

.el-switch__core {
  // background: $--color-primary !important;
  @include common-white-bg($--border-color-base);
}

// radio
.el-radio-button__inner {
  @include common-input-bg($gc-color-white);
}

.el-tabs__item.is-active {
  color: $--color-primary !important;
}

// 默认的滚动条
::-webkit-scrollbar-thumb {
  background: var(--gc-scroll) !important;
}

// el-scrollbar
.el-scrollbar:hover>.el-scrollbar__bar {
  background-color: transparent !important;
}

.el-scrollbar__thumb {
  background: var(--gc-scroll) !important;
}

// select components scrollbar-x
.scrollInSelect {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

// element
// popover
.el-popover {
  @include common-border($--border-color-lighter);
}

.el-popper[x-placement^="top"] .popper__arrow {
  border-top-color: var(--gc-border) !important;
}

.el-popper[x-placement^="right"] .popper__arrow {
  border-right-color: var(--gc-border) !important;
}

.el-popper[x-placement^="bottom"] .popper__arrow {
  border-bottom-color: var(--gc-border) !important;
}

.el-popper[x-placement^="left"] .popper__arrow {
  border-left-color: var(--gc-border) !important;
}

// tooltip
.el-tooltip__popper.is-dark {
  // border: var(--gc-border-none) !important;
  background-color: var(--gc-element) !important;
  color: var(--gc-text) !important;
}

// border  none
.el-dropdown-menu {
  border: var(--gc-border-none) !important;
}

.table-box {
  .el-table {
    border: 1px solid var(--gc-main-bg);
  }
}


.el-message-box,
.el-notification,
.el-collapse-item__wrap,
.el-collapse {
  border: var(--gc-border-none) !important;
}
.el-message-box{
  .el-button--primary {
    background-color: $--color-primary !important;
    border: 1px solid $--color-primary !important;
    span{
      color: $gc-color-white !important;
    }
    &:hover{
      background-color: $--color-primary !important;
    }
  }
}


.el-collapse-item__header {
  border-bottom: 1px solid var(--gc-main-bg) !important;
}

.el-color-picker__trigger {
  border: var(--gc-border-none) !important;
}

td.el-table__cell {
  border-bottom: var(--gc-border-none) !important;
}

.el-color-picker__panel {
  background-color: var(--gc-element);
  border: var(--gc-border-none) !important;

  .el-button--default {
    border: 1px solid var(--gc-main-bg) !important;

    &:hover {
      border: 1px solid $--color-primary !important;
      span {
        color: $--color-primary !important;
      }
    }
  }

  .el-button--text {
    span {
      color: $--color-primary;
    }

    &:hover {
      border: 1px solid transparent;
    }
  }
}

// text color
.gc-setting--wrap {
  .gc-setting {
    .gc-setting__title {
      color: var(--gc-text);
    }

    .gc-setting__list {
      >li {

        &.active .gc-setting__item,
        &:hover .gc-setting__item {
          border-color: var(--gc-bg) !important;
        }

        &:after {
          border: 1px solid red !important;
        }

        &.active .gc-setting__item:after {
          display: block;
        }
      }
    }
  }

  .gc-setting__item--fixed {
    span {
      color: var(--gc-text);
    }
  }

}

// el-button  // button
.el-button {
  .el-icon-loading {
    color: var(--gc-text);
  }
}

// default disable text
.el-button--default.is-disabled {
  background-color: none !important;
  border:1px solid var(--gc-element) !important ;
  span {
    color: var(--gc-element-disable) !important;
  }

  &:hover {
    border: 1px solid var(--gc-element-border) !important;
  }
}

//primary  disable
.el-button--primary.is-disabled {
  background-color: $--color-primary !important;
  opacity: var(--gc-element-opacity);
  border: 1px solid $--color-primary !important;
  span {
    color: var(--gc-text-white) !important;
  }

  &:hover {
    border: 1px solid $--color-primary !important;
    opacity: var(--gc-element-opacity);
  }
}


.el-button--danger {
  span {
    color: #ffffff !important;
  }

  &:hover {
    border: 1px solid #ff4d53 !important;
  }
}

// link
.el-link--default {
  color: var(--gc-text);
}

.el-link--inner {
  &:hover {
    color: $--color-primary !important;
  }
}

// input
.el-input {
  .el-input__inner {
    border: 1px solid var(--gc-element-border) !important;
  }
}

// 左侧菜单查询区域
.el-input-custom {
  .el-input__inner {
    border: none !important;
  }
}

.el-button--primary.is-plain {
  // background: var(--gc-border-none) !important;
  background-color: $--color-primary !important;
  border-color: $--color-primary !important;
}

// el-radio
// span color
.el-radio-group {
  .is-active {
    span {
      color: var(--gc-text-white) !important;
    }
  }
}

.el-radio__inner {
  background-color: var(--gc-element-checked) !important;
}

.el-radio__input.is-checked .el-radio__inner {
  background-color: $--color-primary !important;
}

// span hover coloe
el-radio-button__inner:hover {
  color: $--color-primary !important;
}

// tabs
.el-tabs__item {
  border: var(--gc-border-none) !important;
  border-bottom: 2px solid var(--gc-element-border-bottom);

  &:hover {
    background-color: var(--gc-element-hover);
    border-bottom: 2px solid var(--gc-element-border-bottom);
  }
}

.el-tabs--card {
  .el-tabs__header {
    border: var(--gc-border-none) !important;
  }

  .el-tabs__nav {
    border: var(--gc-border-none) !important;
  }
}

.el-tabs__nav-wrap::after {
  background-color: var(--gc-element-border-bottom) !important;
}

// el-form
.el-form {
  th.el-table__cell.is-leaf {
    border-bottom: 1px solid var(--gc-element-border-bottom) !important;
  }
}

// el-table
.el-table th.gutter {
  background-color: var(--gc-element-header-bg) !important;
}

// el-dialog
.el-dialog__body {
  padding: 18px 24px !important;

  .el-tabs__item.is-active {
    border-bottom: 2px solid $--color-primary !important;
  }
}

// .el-dropdown-menu__item
.el-select-dropdown {
  border: var(--gc-border-none) !important;
  background-color: var(--gc-element);
}

// loading
.el-loading-mask {
  background-color: var(--gc-element-header-bg) !important;
}

// checkbox inner bg
.el-checkbox__inner {
  background-color: var(--gc-element) !important;

  &::before {
    background-color: $gc-color-white !important;
  }

  &::after {
    border-bottom: 1px solid $gc-color-white !important;
    border-right: 1px solid $gc-color-white !important;
  }
}

.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: $--color-primary !important;
}

.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: $--color-primary !important;
}

// dialog  table check-box disable
.el-checkbox__input.is-disabled .el-checkbox__inner {
  background-color: var(--gc-element-disable) !important;
}

// empty
.el-empty__image {
  filter: opacity(0.5);
}


// el-menu-popover
.gc-side-menu {
  .el-menu--popup {
    background-color: var(--gc-side-menu-bg) !important;

    .el-menu-item {
      &:hover {
        background-color: var(--gc-element-hover) !important;
      }
    }

    .is-active {
      background-color: var(--gc-element-hover) !important;
    }
  }
}


// el-drawer
.el-drawer__header {
  padding: 0 !important;
  background-color: var(--gc-element-header-bg) !important;
}

.el-drawer__wrapper {
  .cell {
    color: var(--gc-text) !important;
  }

  th.is-leaf {
    background-color: var(--gc-element-header-bg) !important;
    border-bottom: 2px solid $--color-primary !important;
  }


}

// el-date-picker
.el-picker-panel {
  border: var(--gc-border-none) !important;
  background-color: var(--gc-content-bg);

  .el-date-picker__header {
    background-color: var(--gc-content-bg);
  }

  .el-date-picker__time-header {
    border-bottom: 1px solid var(--gc-main-bg) !important;
  }

  .el-date-table th {
    border-bottom: 1px solid var(--gc-main-bg) !important;
  }

  .el-picker-panel__content {
    background-color: var(--gc-content-bg);
  }

  .el-picker-panel__footer {
    border-top: 1px solid var(--gc-main-bg) !important;
    background-color: var(--gc-content-bg);
  }

  .el-button--text {
    background-color: var(--gc-content-bg) !important;

    &:hover {
      border: 1px solid transparent !important;
    }
  }
}

// CodeMirror-scroll
.CodeMirror-scroll {
  background-color: var(--gc-bg);

  span {
    color: var(--gc-text) !important;
  }
}

.CodeMirror-gutters {
  border-right: 1px solid var(--gc-element-header-bg) !important;
  background-color: var(--gc-element-header-bg);
}

// 仪表盘
.gc-dashboard {
  .el-tooltip {
    i {
      color: var(--gc-i) !important;
    }
  }

  .card-top-title {
    color: var(--gc-text);
  }

  .list-num {
    color: var(--gc-text) !important;
  }

  .card-second-num-first {
    color: var(--gc-text) !important;
  }

  .card-second-num-second {
    color: var(--gc-text) !important;
  }

  .el-card__header {
    border-bottom: 1px solid var(--gc-element-border-bottom) !important;
  }
}

// login
.gc-login-form {
  .el-input__inner {
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
  }

  .gc-login-title {
    color: var(--gc-text);
  }

  .el-tabs__item.is-active {
    @include common-bg($whiteBgHover) // background-color: var(--gc-element-hover) !important;
  }

  .verification-label {
    top: 60% !important;
  }
}

// 服务器信息
.el-descriptions {
  th {
    border: 1px solid var(--gc-element-header-bg) !important;
  }

  td {
    border: 1px solid var(--gc-element-header-bg) !important;
  }
}

// table filter
.el-table-filter {
  border: var(--gc-border-none) !important;
}

.el-table-filter__bottom {
  border-top: var(--gc-border-none) !important;
}


.el-descriptions__title {
  color: var(--gc-text);
}

.el-descriptions-item__label .is-bordered-label {
  background: var(--gc-main-bg) !important;
}

.is-bordered-label {
  background: var(--gc-main-bg) !important;
}

// 二次封装表格样式
.btn-unline-content {
  border-bottom: 1px solid var(--gc-bg) !important;

  .btn {
    background: var(--gc-bg) !important;
    color: var(--gc-text) !important;
  }
}

// el-range-editor
.el-range-editor {
  .el-range-separator {
    color: var(--gc-main-bg);
  }

  .el-range-input {
    background: var(--gc-bg);
  }
}

.el-time-spinner__item:hover:not(.disabled):not(.active) {
  background: var(--gc-element-hover) !important;
}

.el-time-range-picker__body {
  border: var(--gc-border-none) !important;
}

.el-time-panel{
  border: var(--gc-border-none) !important;
}
.el-time-panel__footer {
  border-top: 1px solid var(--gc-element-header-bg) !important;
}

.el-menu--popup {
  .menu-wrapper {
    padding: 2px;
  }
}
